HTML - tags - captions tag

revision:

Content

"canvas" tag : used to draw graphics on the fly syntax some examples

"caption" tag : specifies the title of a table

top

The <caption> HTML element specifies the caption (or title) of a table. The caption tag, which defines the title of a table in the HTML document, is the first tag to appear after the table tag. Only one caption can be specified for one table. The caption element should be the first child of its parent table element. When the "table" element that contains the "caption" is the only descendant of a "figure" element, the "figcaption" element should be used instead of "caption".

A background-color on the table will not include the caption. Add a background-color to the "caption" element as well if you want the same color to be behind both.

Attributes: the <caption> element includes the global attributes.

syntax

top

<caption type=" "> . . . </caption>

some examples

top
Example caption
login email
user1 [email protected]
user2 [email protected] 
code:
                <div class="spec-1">
                    <table >
                        <caption>Example caption</caption>
                        <tr<>
                        <th>login</th>
                        <th>email</th>
                        </tr>
                        <tr>
                        <td>user1</td>
                        <td class="space">[email protected]</td>
                        </tr>
                        <tr>
                        <td>user2</td>
                        <td class="space">[email protected]</td>
                        </tr>
                    </table>
                </div>
Students
Firstname Lastname Age
Lionel Devries 24
Christine Delrue 32
Thomas Winters 41 
code:
                <div class="spec-1">
                    <table> 
                        <caption>Students</caption> 
                        <tr> 
                            <th>Firstname</th> 
                            <th class="space">Lastname</th> 
                            <th class="space">Age</th> 
                        </tr> 
                        <tr> 
                            <td>Lionel</td> 
                            <td class="space">Devries</td> 
                            <td class="space">24</td> 
                        </tr> 
                        <tr> 
                            <td>Christine</td> 
                            <td class="space">Delrue</td> 
                            <td class="space">32</td> 
                        </tr> 
                        <tr> 
                            <td>Thomas</td> 
                            <td class="space">Winters</td> 
                            <td class="space">41</td> 
                        </tr> 
                    </table> 
                </div>
favorite fruits
name favorite fruit
Rudy Apple
Nicole Plum 
code:
                <div class="spec-1"> 
                    <table> 
                        <caption>favorite fruits</caption> 
                        <tr> 
                            <th>name</th> 
                            <th>favorite fruit</th> 
                        </tr>
                        <tr> 
                            <td>Rudy</td> 
                            <td class="space">Apple</td> 
                        </tr> 
                        <tr> 
                            <td>Nicole</td> 
                            <td class="space">Plum</td>
                        </tr>
                    </table>
                </div>

The figure and figcaption element

on the beach
Fig.1 - Holidays, picture one
coded:
                <div class=spec>
                    <figure>
                        <img src="../../pics/5.jpg" alt="on the beach" style="width:30%">
                        <figcaption class="example">Fig.1 - Holidays, picture one</figcaption>
                    </figure>
                </div>